<template lang="">
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>文章管理</span>
      </div>
      <div class="text item">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="文章标题">
                  <span>{{ props.row.title }}</span>
                </el-form-item>
                <el-form-item label="文章图片">
                  <img :src="props.row.pic_url" alt="" srcset="" style="width: 200px;height: 200px;">
                </el-form-item>
                <el-form-item label="文章内容">
                  <mavon-editor v-model="props.row.content" />
                </el-form-item>
              </el-form>
            </template>
</el-table-column>
<el-table-column prop="title" label="文章标题" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column label="文章分类一">
    <template v-slot='c'>
              <el-tag size="small">{{c.row.class_name01}}</el-tag>
            </template>
</el-table-column>
<el-table-column label="文章分类二">
    <template v-slot='c'>
              <el-tag size="small">{{c.row.class_name02}}</el-tag>
            </template>
</el-table-column>
<el-table-column label="文章分类三">
    <template v-slot='c'>
              <el-tag size="small">{{c.row.class_name03}}</el-tag>
            </template>
</el-table-column>
<el-table-column prop="like_count" label="文章点赞量">
</el-table-column>
<el-table-column prop="visited" label="文章阅读量">
</el-table-column>
<el-table-column label=" 文章上传时间" :show-overflow-tooltip="true">
    <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
            </template>
</el-table-column>
<el-table-column label="操作">
    <template v-slot='scope'>
              <el-button size="mini" type="danger" @click="del(scope.row)">删除
              </el-button>
            </template>
</el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page.currentPage" :page-sizes="[5,10]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total" background>
</el-pagination>
</div>
</el-card>
</div>
</template>
<script>
    export default {
        data() {
            return {
                //表格
                tableData: [],
                //分页
                page: {
                    currentPage: 1, // 当前页
                    total: 0, // 数据总条数
                    pageSize: 5, // 每页条数
                },
            }
        },
        mounted() {
            this.getshopAll()
        },
        methods: {
            //获取数据
            getshopAll() {
                this.$axios.get('/getarticle', {
                    params: {
                        pageSize: this.page.pageSize,
                        currentPage: this.page.currentPage,
                    }
                }).then(res => {
                    console.log(res.data.result);
                    this.page.total = res.data.count
                    this.tableData = res.data.result;
                })
            },
            // 每页显示条数改变 就会触发这个函数
            handleSizeChange(val) {
                // 保存每页显示的条数
                this.page.pageSize = val;
                this.getshopAll()

            },
            // 当前页码改变 就会触发这个函数
            handleCurrentChange(val) {
                // 保存当前页码
                this.page.currentPage = val;
                this.getshopAll()

            },
            //删除
            del(del) {
                this.$confirm(`此操作将永久删除该文章${del.id}, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete(`/article/${del.id}`).then(res => {
                        if (res.data.code == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getshopAll()

                        } else {
                            this.$message.error("删除失败");
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },

    }
</script>
<style lang="less" scoped>
    .demo-table-expand {
        font-size: 0;
    }
    
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    
    .demo-table-expand .el-form-item {
        margin-left: 3%;
        margin-right: 0;
        margin-bottom: 0;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
    }
</style>